<template>
  <div ref="RenderArea" class="RenderArea"></div>
</template>

<script>
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';

export default {
  mounted() {
    let _this = this;
    const AreaWidth = this.$refs.RenderArea.offsetWidth;
    const AreaHeight = this.$refs.RenderArea.offsetHeight;

    function animation(time) {
      mesh.rotation.x = time / 2000;
      mesh.rotation.y = time / 1000;
      renderer.render(scene, camera);
      stats.update();
    }

    const camera = new THREE.PerspectiveCamera(
      75,
      AreaWidth / AreaHeight,
      0.01,
      10
    );
    camera.position.z = 1;

    const stats = new Stats();
    stats.domElement.style.position = 'absolute';
    // stats.showPanel(0);
    _this.$el.appendChild(stats.dom);

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(AreaWidth, AreaHeight);
    renderer.setAnimationLoop(animation);

    _this.$el.appendChild(renderer.domElement);
  },
};
</script>
